<template>
    <div :id="'echart_'+id" :style="{height: height+'px',width: '100%'}"></div>
</template>

<script>
    import * as echarts from 'echarts';
    import 'echarts-liquidfill';

    export default {
        name: "echart",
        data() {
            return {

            }
        },
        props: {
            height: {
                type: Number,
                default: 200
            },
            id: {
                type: String,
                default: 'fill'
            },
            size: {
                type: String,
                default: 1
            }
        },
        mounted() {
            this.$nextTick(() => {
               this.createFillEchart();
            });
        },
        methods: {
            createFillEchart() {
                let chartDom = document.getElementById('echart_'+this.id);
                let myChart = echarts.init(chartDom);
                let option = {
                    series: [{
                        type: 'liquidFill',
                        name: 'Liquid Fill',
                        radius: '70%',
                        // itemStyle: {
                        //     opacity: 0.55,
                        // },

                        data: [{
                            name: 'score',
                            direction: 'right',
                          // value: parseInt(this.size)/10000+0.0001,
                          value: this.size,
                            itemStyle: {
                                // opacity: 0.55,
                                normal: {
                                    color: '#02CDF6',
                                }
                            },
                        },
                            {
                                name: 'scores',
                                direction: 'right',
                                value: 0.69,
                                itemStyle: {
                                    opacity: 0.55,
                                    normal: {
                                        color: '#134892'
                                    }
                                }
                            },
                            {
                                name: 'scorex',
                                direction: 'right',
                                value: 0.45,
                                itemStyle: {
                                    opacity: 0.55,
                                    normal: {
                                        // color: 'red'
                                    }
                                }
                            }],
                        backgroundStyle: {   // 设置水球图内部背景色
                            // borderColor: '#4348EC',
                            // borderWidth: 10,
                            color: "transparent",//水球图内部背景色
                        },
                        itemStyle: {
                            opacity: 0.55,
                            // shadowBlur: 50,
                            // shadowColor: 'rgba(0, 0, 0, 0.4)',
                        },
                        label: {   // 设置百分比展示
                            color: '#02CDF6',
                            normal: {
                                textStyle: {
                                    fontSize: 20,
                                },
                                formatter: function (param) {
                                    return param.value * 100 + '%';
                                }
                            }
                        },
                        // outline: { // 是否显示外圈
                        //   show: false
                        // }
                    }],
                };
                option && myChart.setOption(option);  // 更新option渲染页面

                window.addEventListener('resize', function () {
                    // 让我们的图表调用 resize这个方法
                    myChart.resize();
                });
            }
        },
      watch: {
        size: function(newValue, oldValue) {
          this.createFillEchart()
        }
      },
      computed: {
        computedNumber(){
          return  this.size;
        }
      }
    }
</script>

<style scoped>

</style>
